
<!DOCTYPE html>
<html>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<head>
		<link rel="stylesheet" href="CSS/bootstrap.min.css" />
		<link rel="stylesheet" href="CSS/layui.css" />
		<link rel="stylesheet" href="CSS/style.css" />
		
		<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=01a7daeb902147321a292fd15d6e2bb0&plugin=AMap.Geocoder"></script>
		<script type="text/javascript" src="//webapi.amap.com/ui/1.1/main.js"></script>
		<script type="text/javascript" src="JS/jquery-3.2.1.min.js"></script>
	</head>
	<style type="text/css" lang="scss">
		.gray-bg{
			
		}
		#lat{
			/* width:750rpx; */
		}
	</style>
	<body class="gray-bg">
		<input id="lat" name="lat" type="hidden" />
		<div id="lmap" style="width: 750upx; height:100vh;">
			<i class="icon-spinner icon-spin icon-large"></i>֘地图加载中..
		</div>
		<script type="text/javascript">
			
			var centre = [];
			var geocoder = new AMap.Geocoder();
			var map = new AMap.Map('lmap', {
				resizeEnable: true, //是否监控地图容器尺寸变化
				zoom: 18, //初始化地图层级
				center: [116.401364, 39.896693] //初始化地图中心点
			});
			// 创建一个 Marker 实例：
			var marker = new AMap.Marker({
				position: new AMap.LngLat(116.401364, 39.896693), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
				title: '北京',
				draggable: true,
			});
			// 将创建的点标记添加到已有的地图实例：
			map.add(marker);
			map.on('rightclick', function(ev) {
				var lnglat = ev.lnglat;
				/*  $("#longitude").val(lnglat.getLng());
				 $("#latitude").val(lnglat.getLat()); */
				$("#lat").val(lnglat.getLng() + "," + lnglat.getLat())
				marker.setPosition(lnglat);
				map.panTo(lnglat);
			});
			map.on('rightclick', function(ev) {
				var lnglat = ev.lnglat;
				/* $("#longitude").val(lnglat.getLng());
				$("#latitude").val(lnglat.getLat()); */
				$("#lat").val(lnglat.getLng() + "," + lnglat.getLat())
				regeoCode(lnglat.getLng(), lnglat.getLat());
				marker.setPosition(lnglat);
				map.panTo(lnglat);
			});
			marker.on('dragend', function(ev) {
				var lnglat = ev.lnglat;
				/*  $("#longitude").val(lnglat.getLng());
				 $("#latitude").val(lnglat.getLat()); */
				$("#lat").val(lnglat.getLng() + "," + lnglat.getLat())
				regeoCode(lnglat.getLng(), lnglat.getLat());
				marker.setPosition(lnglat);
				map.panTo(lnglat);
			});

			function geoCode(address) {
				if (address == "") {
					// utiljs.alertToast("error", '请输入需要定位地址!', null);
					return;
				}
				geocoder.getLocation(address, function(status, result) {
					if (status === 'complete' && result.geocodes.length) {
						var lnglat = result.geocodes[0].location;
						$("#lat").val(lnglat.getLng() + "," + lnglat.getLat())
						marker.setPosition(lnglat);
						map.panTo(lnglat);
					} else {
						alert("无法定位！")
					}
				});
			}

			function regeoCode(longitude, latitude) {
				var lnglat = [longitude, latitude];
				if (!marker) {
					marker = new AMap.Marker();
					map.add(marker);
				}
				marker.setPosition(lnglat);

				geocoder.getAddress(lnglat, function(status, result) {
					if (status === 'complete' && result.regeocode) {
						var address = result.regeocode.formattedAddress;
					} else {
						alert("无法定位！")
					}
				});
			}
			
		</script>
		<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
		<script type="text/javascript">
			$(function() {
				var flag = $("#flag").val();
				if (flag == 0) {
					$('#centreId').searchableSelect();
				}
			});
		</script>
	</body>
</html>

